import React from 'react';
import { View, ImageBackground, TouchableOpacity } from 'react-native';
import { Flex, Switch } from 'antd-mobile-rn';
import { Navigation } from 'react-native-navigation';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/icomoon';
import Scene from '../screen/scene';
import { createStyles } from '../../utils/view';
import { colors } from '../../styles/basic';
import NormalHeader from '../../components/NormalHeader';
import CText from '../../components/CText';
import MenuItem from './components/menuItem';
import Storage from '../../utils/storage';
import actions from '../../controllers/user/actions';

const menuItems = [
  {
    icon: 'my_03',
    color: '#5cbda4',
    name: '我的流水',
  },
  {
    icon: 'my_04',
    color: '#df4046',
    name: '我的订单',
    path: 'Details'
  },
  {
    icon: 'my_05',
    color: '#d4d43c',
    name: '公告',
  },
  {
    icon: 'my_06',
    color: '#3c479b',
    name: '我的资料',
  },
];

class MyScreen extends React.Component {

  static navigatorStyle = {
    navBarHidden: true,
    navBarNoBorder: true,
  };

  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    this.state = {
      checked: false,
      token: null,
    };
  }

  onNavigatorEvent(event) {
    if (event.type === 'ScreenChangedEvent') {
      if (event.id === 'didAppear') {
        this.init();
      }
    }
  }

  async init() {
    const token = await Storage.load('token');
    if (token) {
      this.props.getUserInfo({ token });
    } else {
      Navigation.showModal({
        screen: 'Login',
        title: '登录',
        passProps: {},
        animated: true,
        animationType: 'slide-horizontal',
        navigatorStyle: {},
        navigatorButtons: {},
      });
    }
  }

  onSwitchChange = (value: any) => {
    this.setState({
      checked: value,
    });
  }

  toPage = (path) => {
    console.log('topage', path);
    if (path) {
      this.props.navigator.push({
        screen: path
      });
    }
  }

  render() {
    const { userInfo } = this.props;
    return (
      <Scene>
        <NormalHeader>我的</NormalHeader>
        <Flex justify="center" align="center">
          <ImageBackground source={require('../../assets/img/my/card_bg.png')} style={styles.userBox} justify="center" align="center">
            <Flex direction="column" justify="center" align="center" style={styles.balance_item}>
              <View style={styles.balance_top}>
                <CText size="40">元宝</CText>
              </View>
              <CText size="34">{userInfo.gold_ingot}</CText>
            </Flex>
            <Flex direction="column" justify="center" align="center" style={styles.balance_item}>
              <View style={styles.balance_top}>
                <CText size="40">积分</CText>
              </View>
              <CText size="34">{userInfo.point}</CText>
            </Flex>
          </ImageBackground>
        </Flex>
        <MenuItem icon="my_01" color="#fce46a" name="CC币" extral={<CText color="#888" size="24">{userInfo.cc_currency}</CText>} />
        <MenuItem icon="my_02" color="#32abe2" name="复投" extral={<Switch checked={this.state.checked} onChange={this.onSwitchChange} color="#F8F1A1" />} />
        {
          menuItems.map((data, index) => (
            <TouchableOpacity onPress={() => { this.toPage(data.path) }}>
              <MenuItem icon={data.icon} color={data.color} name={data.name} key={data.icon} extral={<Icon name="my_02" style={styles.right} />} />
            </TouchableOpacity>
          ))
        }
      </Scene>
    );
  }
}

let styles = {
  userBox: {
    width: 702,
    height: 344,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  right: {
    fontSize: 32,
    color: '#888888'
  },
  balance_top: {
    marginBottom: 30,
  },
  balance_item: {
    flex: 1,
  }
};

styles = createStyles(styles);

export default connect((Store) => {
  return { loading: Store.AuthRenderData.loading, userInfo: Store.UserRenderData };
}, { getUserInfo: actions.GetUserInfo })(MyScreen);